<template>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="brand"
      :rules="rules"
      ref="brand"
      label-width="100px"
    >
      <el-form-item
        label="商品名称"
        prop="name"
      >
        <el-input
          v-model="brand.name"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否显示">
        <el-switch
          v-model="brand.showStatus"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-form-item>
      <el-form-item label="商品排序">
        <el-input-number
          v-model="brand.sort"
          :min="0"
          :max="10"
        ></el-input-number>
      </el-form-item>
      <el-form-item
        label="首字母"
        prop="firstLetter"
      >
        <el-input
          v-model="brand.firstLetter"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input
          v-model="brand.descript"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="商品图标"
        prop="logo"
      >
        <!-- 子组件 -->
        <single-upload
          v-model="brand.logo"
          :msg='msg'
        ></single-upload>
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="visible = false">取消</el-button>
      <el-button
        type="primary"
        @click="dataFormSubmit('brand')"
      >确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import singleUpload from '@/components/upload/singleUpload.vue'
export default {
  data () {
    return {
      visible: false,
      title: '',
      brand: {
        brandId: '',
        name: '',
        logo: '',
        descript: '',
        showStatus: '',
        firstLetter: '',
        sort: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请输入活动名称',
          trigger: 'blur'
        },
        {
          min: 1,
          max: 5,
          message: '长度在 1 到 5 个字符',
          trigger: 'blur'
        }
        ],
        firstLetter: [{
          validator: (rule, value, callback) => {
            let regular = /^[a-zA-Z]/
            if (!regular.test(value)) {
              callback(new Error('请输入英文字母'))
            } else if (value.length > 1) {
              callback(new Error('请输入一位英文字母'))
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'blur'
        }],
        logo: [
          // { required: true, message: '请输入品牌logo', trigger: 'blur' }
        ]
      },
      dialogType: '',
      row: '', // 修改点击每行的数据
      msg: '111'
    }
  },
  methods: {
    init (index, row) {
      this.visible = true
      if (Number.isNaN(parseInt(index))) {
        this.title = '添加品牌'
        this.dialogType = 'add'

        this.addEchoBrand()
      } else {
        this.title = '修改品牌'
        this.dialogType = 'edit'
        this.row = row
        this.editEchoBrand(this.row)
      }
    },
    // 添加时清空回显
    addEchoBrand () {
      this.brand.brandId = ''
      this.brand.name = ''
      this.brand.descript = ''
      this.brand.showStatus = ''
      this.brand.firstLetter = ''
      this.brand.sort = ''

      this.msg = ''
    },
    // 添加
    addBrand () {
      this.$http({
        url: this.$http.adornUrl('/product/brand/save'),
        method: 'post',
        data: this.$http.adornData(this.brand, false)
      }).then(({
        data
      }) => {
        this.$message({
          type: 'success',
          message: '品牌保存成功!'
        })
        this.visible = false // 关闭对话框
        this.$emit('refreshDataList') // 刷新数据
      })
    },

    // 修改回显
    editEchoBrand (row) {
      this.$http({
        url: this.$http.adornUrl(`/product/brand/info/${row.brandId}`),
        method: 'get'
        // params: this.$http.adornParams({

        // })
      }).then(({
        data
      }) => {
        // 回显
        this.brand.brandId = data.data.brandId
        this.brand.name = data.data.name
        this.brand.descript = data.data.descript
        this.brand.showStatus = data.data.showStatus
        this.brand.firstLetter = data.data.firstLetter
        this.brand.sort = data.data.sort
        this.brand.logo = data.data.logo
        this.msg = data.data.logo
      })
    },

    // 修改
    editBrand () {
      this.$http({
        url: this.$http.adornUrl('/product/brand/update'),
        method: 'post',
        data: this.$http.adornData(this.brand, false)
      }).then(({
        data
      }) => {
        this.$message({
          type: 'success',
          message: '品牌修改成功!'
        })
        this.visible = false // 关闭对话框
        this.$emit('refreshDataList') // 刷新数据
      })
    },

    // 表单提交
    dataFormSubmit (brand) {
      this.$refs[brand].validate((valid) => {
        if (valid) {
          if (this.dialogType === 'add') {
            this.addBrand()
          } else {
            this.editBrand()
          }
        } else {
          return false
        }
      })
    }
  },
  // 组件
  components: {
    singleUpload
  }
}
</script>
